import { useRoutes, NavLink, Routes, Route, Link } from 'react-router-dom'
import routes from './router/config'
import { Home, Cart } from './pages'
import { Button, DatePicker } from 'antd'
// import 'antd/dist/antd.css'

/**
 * Routes: 负责包裹区域，区分路由，
 * Route: 负责渲染路由 ，element => 渲染一个jsx语法的组件 ， path 渲染路径
 */

function App() {
  const element = useRoutes(routes)
  return (
    <div className="App">
      <Button type="danger">你好</Button>
      <DatePicker></DatePicker>
      <NavLink to="/redux">redux</NavLink> |<NavLink to="/home">Home</NavLink>
      {element}
    </div>
  )

  // return (
  //   <div>
  //     {/* {element} */}
  //     {/* <h1>App</h1> */}
  //     {/* <NavLink to={'/home'}>home</NavLink>
  //     <NavLink to={'/cart'}>Cart</NavLink>

  //     <Routes>
  //       <Route path="/home" element={<Home />} />
  //       <Route path="/cart" element={<Cart />} />
  //     </Routes> */}
  //   </div>
  // )
}

export default App

// import './App.css'
// import {
//   Cart,
//   MyBs,
//   MyBetterScroll,
//   TabBar,
//   HOC,
//   MyRef,
//   Demo,
//   MyList,
//   StyledComponent,
//   Classify,
//   SlotChildren,
// } from './pages'
// import React from 'react'
// import 'normalize.css' // 重置css样式的一个文件

// import 'antd/dist/antd.css'
// import { Button } from 'antd'
// import axios from 'axios'
// import withControlledState from './utils/withControlledState'
// import routes from './router/config'

// class App extends React.Component {
//   state = {
//     flag: true,
//   }
//   async componentDidMount() {
//     const data = await axios.post('/api/post-test')
//     // console.log('data:', data)
//   }
//   render() {
//     return (
//       <div className="App">
//         {/* <MyBetterScroll /> */}
//         <TabBar />
//         {/* <Demo></Demo> */}
//         {/* <MyBs></MyBs> */}
//         {/* <Cart /> */}
//         {/* <MyRef /> */}
//         {/* <HOC /> */}
//         {/* <Button type="primary" danger={true} size="large">
//           按钮
//         </Button>
//         <SlotChildren /> */}
//         {/* <MyList></MyList> */}
//         {/* <MyBetterScroll></MyBetterScroll> */}
//         {/* <Cart></Cart> */}
//         {/* <Classify /> */}
//         {/* <StyledComponent /> */}
//       </div>
//     )
//   }
// }

// export default App
